<template>
  <div class="app-container">
    <el-button type="primary" @click="openFoodTypeDialog">管理菜型</el-button>
    <el-button type="primary" @click="openFoodAttributeDialog">菜品属性</el-button>
    <!--管理菜型弹窗-->
    <el-dialog
      title="管理菜型"
      :visible.sync="foodTypeDialog"
      width="450px"
      :before-close="closeFoodTypeDialog">
      <hr>
      <div class="dialog" style="margin:0 auto;width: 400px">
        <div class="dialog_body">
          <div class="dialog_body_data" v-for="item in foodTypeList">
            <span class="font">{{item.name}}</span>
            <i data-v-0af267bf class="icon el-icon-delete" @click="deleteFoodType(item.id)"></i>
            <i data-v-0af267bf class="icon el-icon-edit" @click="openFoodTypeEditDialog(item.id,item.name)"></i>
          </div>
        </div>
        <div>
          <div v-show="show_dialog_handle">
            <el-input class="dialog_save_input" v-model="foodTypeName" placeholder="请输入菜品类型"></el-input>
            <el-button class="dialog_save_button" @click="saveFoodType">保存</el-button>
          </div>
          <el-button class="open_show_dialog_handle_button" @click="openFoodTypeAddDialog">+添加类型</el-button>
        </div>
      </div>
    </el-dialog>
    <!--菜品属性弹窗-->
    <el-dialog
      title="菜品属性"
      :visible.sync="foodAttributeDialog"
      width="450px"
      :before-close="closeFoodAttributeDialog">
      <hr>
      <div class="dialog" style="margin:0 auto;width: 400px">
        <el-tabs style="color: orange" :stretch=true v-model="foodAttributeId" @tab-click="changeFoodAttributeTab">
          <el-tab-pane :label="item.type" :name="item.id" :key="item.id" v-for="item in foodAttributeTabList">
          </el-tab-pane>
        </el-tabs>
        <div class="dialog_body">
          <div class="dialog_body_data" v-for="item in foodAttributeDetailList">
            <span class="font">{{item.name}}</span>
            <i data-v-0af267bf class="icon el-icon-delete" @click="deleteFoodAttribute(item.id)"></i>
            <i data-v-0af267bf class="icon el-icon-edit" @click="openEditDialogHandle(item.id,item.name)"></i>
          </div>
        </div>
        <div>
          <div v-show="show_dialog_handle">
            <el-input class="dialog_save_input" v-model="foodAttributeDetailName" placeholder="请输入内容"></el-input>
            <el-button class="dialog_save_button" @click="saveFoodAttributeDetail">保存</el-button>
          </div>
          <el-button class="open_show_dialog_handle_button" @click="openAddDialogHandle">+添加做法</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    findFoodAttribute,
    addFoodAttribute,
    editFoodAttribute,
    deleteFoodAttribute
  } from '@/modules/food/api/food_attribute_detail'
  import {findFoodType, addFoodType, editFoodType, deleteFoodType} from '@/modules/food/api/food_type'

  export default {
    name: 'index',
    data () {
      return {
        // 管理菜型
        foodTypeId: '',
        foodTypeDialog: false,
        foodTypeName: '',
        foodTypeList: [],
        // 菜品属性
        foodAttributeId: '120725207030697984',
        foodAttributeDetailId: '',
        batch_operation: false,
        foodAttributeDialog: false,
        show_dialog_handle: false,
        foodAttributeTabList: [], // 菜品属性tab
        foodAttributeDetailList: [], // 菜品属性详情
        foodAttributeDetailName: '',
      }
    },
    methods: {
      // =================管理菜型方法开始==============================
      findFoodType () {
        findFoodType().then(response => {
          this.foodTypeList = response.obj.content
        }).catch(() => {

        })
      },
      openFoodTypeDialog () {
        this.findFoodType()
        this.foodTypeDialog = true
      },
      closeFoodTypeDialog () {
        this.show_dialog_handle = false
        this.foodTypeDialog = false
      },
      // 打开菜品类型添加框
      openFoodTypeAddDialog () {
        this.show_dialog_handle = true
        this.foodTypeName = ''
      },
      // 保存菜型类型，添加或者修改
      saveFoodType () {
        if (this.foodTypeId) {
          this.editFoodType()
        } else {
          this.addFoodType()
        }
      },
      // 打开菜品类型修改框
      openFoodTypeEditDialog (id, name) {
        this.show_dialog_handle = true
        this.foodTypeName = name
        this.foodTypeId = id
      },
      /**
       * 添加新的菜品类型
       */
      addFoodType () {
        addFoodType(this.foodTypeName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {

        })
      },
      /**
       * 修改菜品类型
       */
      editFoodType () {
        // 打开修改框并回显
        this.show_dialog_handle = true
        editFoodType(this.foodTypeId, this.foodTypeName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {
          this.closeShowDialogHandle()
        })
        this.foodTypeId = ''
      },
      /**
       * 删除菜品属性详情
       */
      deleteFoodType (id) {
        deleteFoodType(id).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodType()
        }).catch(() => {

        })
      },
      // =================管理菜型方法结束==============================

      //==================菜品属性方法开始==============================
      // 获取菜品属性列表
      findFoodAttribute () {
        findFoodAttribute(this.foodAttributeId).then(response => {
          this.foodAttributeTabList = response.obj.tabItem
          this.foodAttributeDetailList = response.obj.detail
        }).catch(() => {

        })
      },
      //打开菜品属性弹框
      openFoodAttributeDialog () {
        this.findFoodAttribute()
        this.foodAttributeDialog = true
      },
      // 菜品属性tab切换
      changeFoodAttributeTab (tab, event) {
        this.openFoodAttributeDialog()
      },
      // 打开添加做法
      openAddDialogHandle () {
        this.foodAttributeDetailName = ''
        this.show_dialog_handle = true
      },
      // 打开修改框
      openEditDialogHandle (id, name) {
        this.show_dialog_handle = true
        this.foodAttributeDetailName = name
        this.foodAttributeDetailId = id
      },
      closeShowDialogHandle () {
        this.show_dialog_handle = false
      },
      //关闭弹框
      closeFoodAttributeDialog () {
        this.show_dialog_handle = false
        this.foodAttributeDialog = false
      },
      /**
       * 保存菜单属性详情，新增或修改
       */
      saveFoodAttributeDetail () {
        if (this.foodAttributeDetailId) {
          this.editFoodAttribute()
        } else {
          this.addFoodAttribute()
        }
      },
      /**
       * 添加新的菜品属性详情
       */
      addFoodAttribute () {
        addFoodAttribute(this.foodAttributeId, this.foodAttributeDetailName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {

        })
      },
      /**
       * 修改菜品属性详情
       */
      editFoodAttribute () {
        // 打开修改框并回显
        this.show_dialog_handle = true
        editFoodAttribute(this.foodAttributeDetailId, this.foodAttributeDetailName).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
          // 关闭内容输入框
          this.closeShowDialogHandle()
        }).catch(() => {
          this.closeShowDialogHandle()
        })
        this.foodAttributeDetailId = ''
      },
      /**
       * 删除菜品属性详情
       */
      deleteFoodAttribute (foodAttributeDetailId) {
        deleteFoodAttribute(foodAttributeDetailId).then(response => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1000
          })
          // 重新获取列表
          this.findFoodAttribute()
        }).catch(() => {

        })
      }
      //==============菜品属性方法结束===================

    }
  }
</script>

<style scoped>
  .flex_chunk {
    min-width: 16.66666666666666666666666%;
    float: left;
    flex-wrap: wrap;
    position: relative;
    padding: 10px;
    /*margin-right: 17px;*/

  }

  .flex {
    width: 100%;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
  }

  .chunk {
    box-sizing: border-box;
    height: 108px;
    position: relative;
    cursor: pointer;
    background-color: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d0d0d0;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }

  .chunk2 {
    height: 108px;
    /*position: relative;*/
    cursor: pointer;
    background-color: #fafafa;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d0d0d0;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }

  .chunk_head_selected {
    background-color: rgb(239, 133, 91);
    padding: 22px;
  }

  .chunk_head_no_selected {
    background-color: rgb(98, 98, 98);
    padding: 22px;
  }

  .chunk_tail {
    /*background-color: rgb(98,98,98);*/
  }

  .chunk2 b {
    background: url(https://test.diet.lingyundata.com/order/resource/images/coupon/201903/3485135F355E479A8FDD1566C83DAAEB.png) no-repeat;
    width: 26px;
    height: 26px;
    position: absolute;
    right: -0px;
    top: -0px;
    z-index: 999;
  }

  .chunk2 b.chunk2_b_selected {
    background: url(https://test.diet.lingyundata.com/order/resource/images/coupon/201903/48F0B2E0B6E145EC9BBCFCC3A234E932.png) no-repeat;

  }

  @media screen and (max-width: 1600px) {
    .flex_chunk {
      min-width: 20%;
    }
  }

  @media screen and (max-width: 1400px) {
    .flex_chunk {
      min-width: 25%;
    }
  }

  @media screen and (max-width: 1200px) {
    .flex_chunk {
      min-width: 25%;
    }
  }

  @media screen and (max-width: 980px) {
    .flex_chunk {
      min-width: 33.33333333%;
    }
  }

  @media screen and (max-width: 800px) {
    .flex_chunk {
      min-width: 50%;
    }
  }

  @media screen and (max-width: 580px) {
    .flex_chunk {
      min-width: 100%;
    }
  }

  .el-tabs >>> .el-tabs__active-bar {
    background-color: rgb(239, 133, 91);
  }

  .el-tabs >>> .el-tabs__item.is-active {
    font-size: 18px;
    color: rgb(239, 133, 91);
  }

  .el-tabs >>> .el-tabs__item:hover {
    color: rgb(239, 133, 91);
  }

  .icon {
    cursor: pointer;
    font-size: 20px;
    padding-left: 5px;
    float: right;

  }

  .icon:hover {
    color: rgb(239, 133, 91);
  }

  .font {
    font-size: 18px;
  }

  .dialog_body {
    width: 100%;
    height: 300px;
    overflow: auto
  }

  .dialog_body_data {
    padding: 10px;
  }

  .dialog_save_input {
    width: 50%
  }

  .dialog_save_button {
    float: right;
    background-color: rgb(239, 133, 91);
    border: 1px solid rgb(239, 133, 91);
    color: white;
  }

  .open_show_dialog_handle_button {
    width: 100%;
    margin-top: 10px;
    margin-left: 0px;
    background-color: rgb(255, 255, 255);
    border: 1px solid #99a9bf;
    color: #1f2d3d
  }

</style>
